<template>
  <!-- 我喜欢 -->
  <div class="like" v-title :data-title="$t('router.likeTitle')">
    <ul class="likeFilter">
      <router-link v-for="item of likeFilter" :key="item.menuId" :to="item.url">
        {{ $i18n.locale === "zh" ? item.menuCname : item.menuName }}
      </router-link>
    </ul>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      likeFilter: [
        {
          menuId: "8-1",
          menuCname: "单曲",
          menuName: "Single",
          url: "/myMusic/like/single",
        },
        {
          menuId: "8-2",
          menuCname: "专辑",
          menuName: "Album",
          url: "/myMusic/like/album",
        },
        {
          menuId: "8-3",
          menuCname: "歌单",
          menuName: "SongList",
          url: "/myMusic/like/song-list",
        },
        {
          menuId: "8-4",
          menuCname: "视频",
          menuName: "Video",
          url: "/myMusic/like/video",
        },
      ],
    };
  },
  components: {},
  computed: {},
  watch: {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.likeFilter {
  display: flex;
  margin: 20px 0;
  a {
    line-height: 32px;
    display: inline-block;
    padding: 0 15px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 18px;
    text-decoration: none;
    &.router-link-active {
      background: #a1322c;
      // font-weight: 700;
      color: #ffffff;
    }
  }
}
</style>
